<template>
  <div class="box">
      <span class="title">站点统计</span>
    <div class="box2">
    <el-row :gutter="20">
    <el-col :span="6">
    <div class="grid-content1 ep-bg-purple" id="content1" ></div><el-icon class="icon2" color="#9ACCFF" size="25"><Pointer /></el-icon></el-col>
    <el-col :span="6"><div class="grid-content2 ep-bg-purple" id="content2"></div><el-icon class="icon1" color="#A982F5" size="25"><View /></el-icon></el-col>
    <el-col :span="6"><div class="grid-content3 ep-bg-purple" id="content3"></div><el-icon class="icon3" color="#6CDFD0" size="25"><Reading /></el-icon></el-col>
    <el-col :span="6"><div class="grid-content4 ep-bg-purple" id="content4"></div><el-icon class="icon4" color="#FF8F4D" size="25"><DocumentChecked /></el-icon></el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="15"><div class="grid-content5 ep-bg-purple"  id="content5"></div></el-col>
    <el-col :span="9"><div class="grid-content6 ep-bg-purple" id="content6"></div><el-row :gutter="20">
    <el-col :span="24"><div class="grid-content7 ep-bg-purple" id="content7"></div></el-col></el-row></el-col>
  </el-row>
  </div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

    

// import type { bottom } from '_@sxzz_popperjs-es@2.11.7@@sxzz/popperjs-es';
onMounted(()=>{
  const content1 = document.getElementById('content1')
  const content2 = document.getElementById('content2')
  const content3 = document.getElementById('content3')
  const content4 = document.getElementById('content4')
  const content5 = document.getElementById('content5')
  const content6 = document.getElementById('content6')
  const content7 = document.getElementById('content7')


  // content1
  if(content1){
    const myChart = echarts.init(content1);
// 绘制图表
    myChart.setOption({
    title:[
      {
    text: '昨日点击量',
    subtext:'-3.00%',
    padding:16,
    textStyle:{
      fontSize:12,
      color:'#4CA4FE',
      fontFamily:'Adobe Heiti Std R',
      fontWeight:'350',
      lineHeight: '21',
 
    },
    subtextStyle:{
    color:'#FF8F4D'
      }
     },
     {
      text:'1,211',
      padding: [30,100],
      textStyle:{
      fontSize:30,
      // fontWeight:'bold',
      color:'#4CA4FE',
      fontFamily:'sans-serif',
      lineHeight: '21',
      // textStyle:{
      //   fontWeight:'500',
      // }
  
    },
     },
    ],
 
  grid: {
    left: -100,
    right: -100,
    bottom: -20,
    // top:100,
    containLabel: true
  },
// x轴
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show:false
  },
// y轴
  yAxis: {
    type: 'value',
    show:false,
  },

  series: [
    {
      data: [488, 932, 1901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      // stack:'总量',
      symbol:'none',
      areaStyle: {
        color: '#9ACCFF ' ,
      },
      lineStyle:{
      color:'#9ACCFF'
      },
      show:false,
    }
  ]
});
  };

// content2
  if(content2){
    const myChart = echarts.init(content2);
// 绘制图表
    myChart.setOption({
      title:[
      {
    text: '昨日浏览量',
    subtext:'+2.00%',
    padding:16,
    textStyle:{
      fontSize:12,
      color:'#FF8F4D',
      fontFamily:'Adobe Heiti Std R',
      fontWeight:'350',
      lineHeight: '21',
    },
    subtextStyle:{
    color:'#69C848'
      }
     },
     {
      text:'1,866',
      padding: [30,100],
      fontFamily:'sans-serif',
      textStyle:{
      fontSize:30,
      color:'#FF8F4D',
      lineHeight: '21',
    },
     },
     {
      
     }
    ],
  grid: {
    left: -100,
    right: -100,
    bottom: -20,
    // top:100,
    containLabel: true
  },
// x轴
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show:false
  },
// y轴
  yAxis: {
    type: 'value',
    show:false
  },

  series: [
    {
      data: [820, 932, 1901, 1934, 1290, 1530, 1720],
      type: 'line',
      smooth: true,
      // stack:'总量',
      symbol:'none',
      areaStyle: {
        color: '#FF8F4D ' ,
      },
      lineStyle:{
     color:'#FF8F4D'
      },
      
      show:false,
    }
  ]
});
  };
  // content3
  if(content3){
    const myChart = echarts.init(content3);
// 绘制图表
    myChart.setOption({
      title:[
      {
    text: '每周浏览量',
    subtext:'+2.00%',
    padding:16,
    textStyle:{
      fontSize:12,
      color:'#A580FF',
      fontFamily:'Adobe Heiti Std R',
      fontWeight:'350',
      lineHeight: '21',
      
      // marginLeft:'16'
    },
    subtextStyle:{
    color:'#69C848'
      }
     },
     {
      text:'1,866',
      padding: [30,100],
      textStyle:{
      fontSize:30,
      fontFamily:'sans-serif',
      color:'#A580FF',
      lineHeight: '21',
    },
     },
    ],
  grid: {
    left: -100,
    right: -100,
    bottom: -20,
    // top:100,
    containLabel: true
  },
// x轴
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show:false
  },
// y轴
  yAxis: {
    type: 'value',
    show:false
  },

  series: [
    {
      data: [1820, 832, 901, 1234, 1290, 1330, 1820],
      type: 'line',
      smooth: true,
      // stack:'总量',
      symbol:'none',
      areaStyle: {
        color: '#A982F5 ' ,
      },
      lineStyle:{
     color:'#A982F5'
      },
      show:false,
    }
  ]
});

  };

// content4
  if(content4){
    const myChart = echarts.init(content4);
// 绘制图表
    myChart.setOption({
      title:[
      {
    text: '每日订单量',
    subtext:'-9.00%',
    padding:16,
    textStyle:{
      fontSize:12,
      color:'#6CDFD0',
      fontFamily:'Adobe Heiti Std R',
      fontWeight:'350',
      lineHeight: '21',
      // marginLeft:'16'
    },
    subtextStyle:{
    color:'#FF8F4D'
      }
     },
     {
      text:'31,559',
      padding: [30,100],
      textStyle:{
      fontSize:30,
      fontFamily:'sans-serif',
      color:'#6CDFD0',
      lineHeight: '21',
    },
     },
    ],
  grid: {
    left: -100,
    right: -100,
    bottom: -20,
    containLabel: true
  },
// x轴
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    show:false
  },
// y轴
  yAxis: {
    type: 'value',
    show:false
  },

  series: [
    {
      data: [1820, 1932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      // stack:'总量',
      symbol:'none',
      areaStyle: {
        color: '#6CDFD0 ' 
      },
        lineStyle:{
     color:'#6CDFD0'
      },
      show:false,
    }
  ]
});
  };

  // content5
  if(content5){
    const myChart = echarts.init(content5);
// 绘制图表
    myChart.setOption({
      title:[{
      text: '成交总金额',
      padding:[34,16],
      textStyle:{
      fontSize:12,
      fontFamily:'Adobe Heiti Std R',
      lineHeight: '21',
    },
  },
  {
    text:'单位（万元）',
    padding:[34,100],
    textStyle:{
      fontSize:10,
      fontFamily:'Adobe Heiti Std R',
      lineHeight: '21',
    },
  }] ,
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['房屋', '家服', '维修'],
    top:'34',
    right:'36',
    icon: 'path://M78.625,93.094L66.494,72.081l12.132-21.013h24.264l12.132,21.013l-12.132,21.013H78.625z M95.547,80.377l4.79-8.296  l-4.79-8.296h-9.579l-4.79,8.296l4.79,8.296H95.547z'
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: '4%',
    top:100,
    containLabel: true
  },
  toolbox: {
    feature: {
      // saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      smooth: true,
      name: '房屋',
      type: 'line',
      stack: 'Total',
      symbol:'none',
      lineStyle:{
         width:3
      },
      data: [220, 182, 191, 234, 290, 330, 310, 234, 290, 330, 310,470]
    },
    {
      smooth: true,
      name: '家服',
      type: 'line',
      stack: 'Total',
      symbol:'none',
      lineStyle:{
         width:3
      },
      data: [150, 232, 201, 154, 290, 430, 410,301, 154, 190, 330, 410]
    },

    {
      smooth: true,
      name: '维修',
      type: 'line',
      stack: 'Total',
      symbol:'none',
      lineStyle:{
         width:3
      },
      data: [820, 932, 901, 934, 990, 830, 920,810, 874, 890, 830, 1110]
    }
  ]
});
  };

// content6
if(content6){
    const myChart = echarts.init(content6);
// 绘制图表
    myChart.setOption({
      title: [{
    text: '地区分布',
    padding:[16,13],
      textStyle:{
      fontSize:12,
      fontFamily:'Adobe Heiti Std R',
      lineHeight: '21',
    }
  }],
  tooltip: {
    trigger: 'item'
  },

  legend: {
    // icon:
    top:'25%',
    left:'10%',
    orient: 'vertical',
    lineStyle:{
    width:50
    },
    itemGap:5,
    icon:'circle'
  },

  series: [
    {
      name: '地区',
      type: 'pie',
      emptyCircleStyle:{
          color:'#ffff'
        },
      radius: ['40%', '70%'],
      avoidLabelOverlap: true,
      center: ['70%', '50%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label:{
        show: true,
        position: 'center',
        fontWeight:'normal',
        fontSize: 10
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },

      
      data: [
        { value:20, name: '上城区     60%' },
        { value:15, name: '西湖区     50%' },
        { value:13, name: '拱墅区     45%' },
        { value:12, name: '钱塘区     40%' },
        { value:10, name: '滨江区     38%' },
        { value:10, name: '萧山区     26%' },

      ]
    }
  ]
});
  };

// content7
if(content7){
    const myChart = echarts.init(content7);
// 绘制图表
    myChart.setOption({
      title: [
    {
      text: '房屋状况',
      padding:[16,13],
      textStyle:{
      fontSize:12,
      fontFamily:'Adobe Heiti Std R',
      lineHeight: '21',
    }
    }
  ],
  legend: {
    top: '30%',
    left:'5%',
    orient: 'vertical',
    fontWeight:'normal',
    fontSize:10,
    itemGap:7,
    icon:'circle'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
    }
  },
  
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 80],
      center: ['65%', '50%'],
      roseType: 'area',
      symbol:'none',
      itemStyle: {
        borderRadius: 8
      },
      label:{
        show: true,
        position: 'center',
        fontWeight:'normal',
        fontSize: 10
      },
      data: [
        { value: 131879 , name: '房间数 21879 间' },
        { value: 122489, name: '已经出租的房屋 122489 间' },
        { value: 61689, name: '正在交易的房屋 61689 间' },
        { value: 34620, name: '还没交易的房屋 34620 间' },
      ]
    }
  ]

});
  };
})
</script>

<style lang="less" scoped>
.box{
  height: 100%;
  width: 100%;
  overflow:hidden;
  margin-left: 16px;
  .title{
    font-size: 12px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    line-height: 45px;
    margin-bottom: 20px;
    // margin-left: 16px;
    margin-top: 16px;
    font-weight: bolder;
    
  }
  
  .box2{
    position: relative;
    height:100%;
    width:100%;
    
    }
}

.el-row {
  margin-bottom: 20px;

}
.el-row:last-child {
  margin-bottom: 0;
  // margin-right: 16px;
}
.el-col { 
  border-radius: 8px;
}

.grid-content1{
  // position: relative;
  border-radius: 4px;
  height: 180px;
  background-color: #ffff; 

}
.grid-content2{
  // position: absolute;
  border-radius: 4px;
  height: 180px;
  background-color: #ffff;

  
};
 .icon1{
  position:absolute;
  top: 20px;
  left:560px;
  }
  .icon2{
  position:absolute;
  top: 20px;
  left:250px;
  }
  .icon3{
  position:absolute;
  top: 20px;
  right:350px;
  }
  .icon4{
  position:absolute;
  top: 20px;
  right:20px;
  }
.grid-content3{
  border-radius: 4px;
  height: 180px;
  background-color: #ffff;
}
.grid-content4{
  border-radius: 4px;
  height: 180px;
  background-color: #ffff;
}

.grid-content5{
  border-radius: 4px;
  height: 400px;
  background-color: #ffff;
}
.grid-content6{
  border-radius: 4px;
  height: 190px;
  background-color: #ffff;
}
.grid-content7{
  // position: absolute;
  border-radius: 4px;
  height: 190px;
  background-color: #ffff;
  margin-top: 20px;
}


</style>
